Introduction
In the previous article, I spoke about the cucumberjs basics. In this article, we will be talking about integrating protractor with cucumber. If you have not visited my previous article, I ask you to click on this
link.
Configuring Protractor
If you have not installed the protractor in your machine, I would recommend you to visit this website (https://www.protractortest.org/#/). This contains all the info on setting up the protractor. In this article, I am using the VScode editor; however, you can use any editor.
Go to VScode editor -> Terminal-> New Terminal
Inside the terminal, please execute the below commands. All the steps are mentioned on the protractor website.
- npm install -g protractor
- webdriver-manager update
- webdriver-manager start
After executing the above commands, we need to check whether protractor is working fine or not. To check that, please consider the below example.
Create a ".js" file in the project and add the below code (Ex: protractorTest.js)
- describe('angularjs homepage todo list', function() {
- it('should add a todo', function() {
- browser.get('https://angularjs.org');
-
- element(by.model('todoList.todoText')).sendKeys('write first protractor test');
- element(by.css('[value="add"]')).click();
-
- var todoList = element.all(by.repeater('todo in todoList.todos'));
- expect(todoList.count()).toEqual(3);
- expect(todoList.get(2).getText()).toEqual('write first protractor test');
-
-
- todoList.get(2).element(by.css('input')).click();
- var completedAmount = element.all(by.css('.done-true'));
- expect(completedAmount.count()).toEqual(2);
- });
- });
In order to execute the above code, you need to specify the conf.js file which contains browser and specs details, as shown below.
In the below example, I have given the "directConnect". We use this command in order to directly execute in the browser without starting the "webdriver -manager". This applies only to Chrome and Firefox. The rest of the browsers "directconnect" will not work
- exports.config = {
-
-
- directConnect: true,
- specs: ['protractorTest.js']
- };
Now in the Terminal, execute the command mentioned below. Your specs should run successfully.
After executing the above code successfully, our protractor is working fine. Now, to integrate it with cucumberjs, you need to execute the below command in the terminal.
- npm install protractor-cucumber-framework --save-dev
After installing the above command, you can check in your package.config file. Once this installation is done, you can create your first feature file, as shown below.
- Feature: Login
- In order to login to the application
- As a User
- I need to enter the Valid username and Password
-
- Scenario: In order to login to the angular app
- Given open the application "http://www.way2automation.com/angularjs-protractor/registeration/#/login"
- When user login with "angular" and "password"
- And User enters the Admin "TestUser"
- Then user should login succcessfully
The above is the simple feature file which runs only for one test case. You can execute it using below command. I have given the feature file name as "Login".
- .\node_modules\.bin\cucumber-js .\features\Login.feature
It will provide you the step definition in the terminal, as shown below.
- 1) Scenario: In order to login to the angular app # features\Login.feature:6
- √ Given open the application "http://www.way2automation.com/angularjs-protractor/registeration/#/login" # features\stepDefinition\LoginDefinition.js:4
- √ When user login with "angular" and "password" # features\stepDefinition\LoginDefinition.js:10
- ? And User enters the Admin "UserNames"
- Undefined. Implement with the following snippet:
-
- When('User enters the Admin {string}', function (string) {
-
- return 'pending';
- });
-
- ? Then user should login succcessfully
- Undefined. Implement with the following snippet:
-
- Then('user should login succcessfully', function () {
-
- return 'pending';
- });
You can copy the step definition and implement the same in your "stepdefinition.js" file.
- var {Given, When, Then, Before} = require('cucumber');
- const { browser, element } = require('protractor');
-
-
- Before({timeout: 60 * 1000}, function() {
-
- browser.manage().window().maximize();
- });
-
- Given(/^open the application "([^"]*)"$/, function (string) {
- return browser.get(string);
- });
-
- When('user login with {string} and {string}', function (string, string2) {
-
- element(by.model('Auth.user.name')).sendKeys(string);
- element(by.model('Auth.user.password')).sendKeys(string2);
- return console.log("entered the user name and password");
- });
-
- When('User enters the Admin {string}', function (string) {
-
- element(by.model('model[options.key]')).sendKeys(string);
- return console.log("enetered the logged in user name");
-
- });
- Then('user should login succcessfully', function () {
-
- return console.log("success");
- });
Now once the "Logindefinition.js" file is implemented, you need to integrate it with protractor. For that, you need to do some modifications in the "conf.js" files. Create a "protractor.conf.js" file in the project and add the below code.
You can use "directConnect" to directly open the application. You need to add "framework and frameworkPath", In the specs section you need to add the feature file name, and "cucumberOpts" section you can add the step definition file names related to the ".feature" file. If you do not have any tags keep that as "false" as of now.
If you do not know what is "tags" in cucumber, you can refer
here.
- exports.config = {
-
- directConnect:true,
- getPageTimeout: 60000,
- allScriptsTimeout: 500000,
- framework: 'custom',
-
- frameworkPath: require.resolve('protractor-cucumber-framework'),
- capabilities: {
- 'browserName': 'chrome'
- },
-
-
- specs: [
- 'features/*.feature'
- ],
-
- cucumberOpts: {
- require: 'features/stepDefinition/LoginDefinition.js',
- tags: false,
-
- }
-
- };
Multiple Test Data and Multiple Scenarios
In the above example, I have created only one scenario which runs for only one test case. In this example, I will explain how to create multiple scenarios with dynamic test data execution.
- Feature: Login
- In order to login to the application
- As a User
- I need to enter the Valid username and Password
-
- Background:
- Given open the application "http://www.way2automation.com/angularjs-protractor/registeration/#/login"
-
- Scenario Outline: Verify the title of the page
- Then the title of page is
-
- Scenario Outline: In order to login to the angular app
- When user login with "<username>" and "<password>"
- And User enters the Admin "<username1>"
- Then user should login succcessfully
- Then user should logout succcessfully
-
-
-
- Examples:
- | username | password | username1 |
- | angular | password | user1 |
- | angular | password | user2 |
-
Step definition code
- var {Given, When, Then, Before, After} = require('cucumber');
- const { browser, element } = require('protractor');
-
-
- Before({timeout: 60 * 1000}, function() {
-
- browser.manage().window().maximize();
- });
-
-
-
- Given("open the application {string}", function (string) {
- return browser.get(string);
- });
-
- Then("the title of the page is", function () {
-
- browser.sleep(4000);
- var titleofPage = browser.getTitle();
- titleofPage.then(function(text){
- console.log("page title is : "+ text);
- });
- });
-
- When("user login with {string} and {string}", function (string, string2) {
-
- element(by.model('Auth.user.name')).sendKeys(string);
- element(by.model('Auth.user.password')).sendKeys(string2);
- return console.log("entered the user name and password");
- });
-
- When("User enters the Admin {string}", async function (string) {
-
- await element(by.model('model[options.key]')).sendKeys(string);
- return console.log("enetered the logged in user name");
-
- });
- Then("user should login succcessfully", function () {
-
- element(by.buttonText("Login")).click();
- return console.log("user logged in successfully");
- });
- Then("user should logout succcessfully", function () {
-
- browser.sleep(4000);
- return element(by.linkText("Logout")).click();
- });
Executing the Scenarios with Tags
In the above example, we saw how to run multiple scenarios. While testing, there will be some test cases we need to keep for smoke testing, integration testing, functional testing. So cucumber, as provided the tags, which help us to execute the particular test case with the help of tags. Let's see how we can do it, by taking the above example.
So in the below feature file, mark one scenario with the tag "@smoke"
- Feature: Login
- In order to login to the application
- As a User
- I need to enter the Valid username and Password
-
- Background:
- Given open the application "http://www.way2automation.com/angularjs-protractor/registeration/#/login"
-
- Scenario: Verify the title of the page
- Then the title of the page is
-
- @smoke
- Scenario Outline: In order to login to the angular app
- When user login with "<username>" and "<password>"
- And User enters the Admin "<username1>"
- Then user should login succcessfully
- Then user should logout succcessfully
-
-
-
- Examples:
- | username | password | username1 |
- | angular | password | user1 |
- | angular | password | user1 |
-
In the conf.js file, you need to add the tag.
- exports.config = {
-
- directConnect:true,
- getPageTimeout: 60000,
- allScriptsTimeout: 500000,
- framework: 'custom',
-
- frameworkPath: require.resolve('protractor-cucumber-framework'),
- capabilities: {
- 'browserName': 'chrome'
- },
-
-
- specs: [
- 'features/*.feature'
- ],
-
- cucumberOpts: {
- tags: ['@smoke'],
- require: 'features/stepDefinition/LoginDefinition.js',
- format:'json:cucumber_report.json'
-
- }
-
-
- };
So when you execute the tag with '@smoke' gets executed.
You can see in the below console. only 2 scenarios are executed w.rt to test data passed.
Generating HTML Reports
Let's see how to generate reports for the above script. In order to generate the report, we need to first create "cucumber_report.json" file. Please add the line of code in conf.js under "cucumberOpts"
- exports.config = {
-
- directConnect:true,
- getPageTimeout: 60000,
- allScriptsTimeout: 500000,
- framework: 'custom',
-
- frameworkPath: require.resolve('protractor-cucumber-framework'),
- capabilities: {
- 'browserName': 'chrome'
- },
-
-
- specs: [
- 'features/*.feature'
- ],
-
- cucumberOpts: {
- require: 'features/stepDefinition/LoginDefinition.js',
- format:'json:cucumber_report.json',
- tags: false,
-
- }
-
-
- };
After executing the above code with command "protractor <name of conf file>.js". The "cucumber_report.json" file will be generated. The next step is to create "index.js file.
- var reporter = require('cucumber-html-reporter');
-
- var options = {
- theme: 'bootstrap',
- jsonFile: './cucumber_report.json',
- output: './cucumber_report.html',
- reportSuiteAsScenarios: true,
- scenarioTimestamp: true,
- launchReport: true,
- metadata: {
- "App Version":"0.3.2",
- "Test Environment": "STAGING",
- "Browser": "Chrome 54.0.2840.98",
- "Platform": "Windows 10",
- "Parallel": "Scenarios",
- "Executed": "Remote"
- }
- };
-
- reporter.generate(options);
Execute the command "node index.js" in the terminal. It will redirect you to the reports.html file which opens up in the browser
Running parallel on Multiple Browsers
When you want to execute tests on multiple browsers at the same time parallelly. Then you need to user the Mutiple Capabilities, shown below:
- exports.config = {
-
- directConnect:true,
- getPageTimeout: 60000,
- allScriptsTimeout: 500000,
- framework: 'custom',
-
- frameworkPath: require.resolve('protractor-cucumber-framework'),
- multiCapabilities:[{
- 'browserName': 'chrome'
- },{
- 'browserName': 'firefox'
- }],
-
-
- specs: [
- 'features/*.feature'
- ],
-
- maxSessions:1, //One browser will open at a time.
-
- cucumberOpts: {
- tags: ['@smoke'],
- require: 'features/stepDefinition/LoginDefinition.js',
- format:'json:cucumber_report.json'
-
- }
-
-
- };
That's it about cucumber, I have not mentioned the customization of conf.js and customization of cucumber reports in this article. That is because it's already available on the websites I mentioned.
Thank You! Happy Coding :-)